<template>
  <el-container>
    <el-main style="padding: 20px; background: #f5f7fa">
      <!-- 顶部指标卡片 -->
      <el-row :gutter="20" style="margin-bottom: 20px">
        <el-col :span="6">
          <el-card shadow="hover" style="border-radius: 8px; padding: 20px" class="custom-card">
            <div style="font-size: 20px; color: #909399; margin-bottom: 12px">今日接待人数</div>
            <div style="font-size: 40px; color: #303133; margin-bottom: 8px">{{ receptions.number }}人</div>
            <div style="width: 350px;font-size: 20px; color: #f56c6c; margin-bottom: 12px">较昨日{{receptions.compare}}人</div>
            <el-link type="primary" href="receptionRegistration">查看详情<i class="el-icon-arrow-right"></i></el-link>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover" style="border-radius: 8px; padding: 20px" class="custom-card">
            <div style="font-size: 20px; color: #909399; margin-bottom: 12px">今日来访人数</div>
            <div style="font-size: 40px; color: #303133; margin-bottom: 8px">{{visit.number}}人</div>
            <div style="width: 350px;font-size: 20px; color: #f56c6c; margin-bottom: 12px">较昨日{{visit.compare}}人</div>
            <el-link type="primary" href="visitorRegistration">查看详情<i class="el-icon-arrow-right"></i></el-link>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover" style="border-radius: 8px; padding: 20px" class="custom-card">
            <div style="font-size: 20px; color: #909399; margin-bottom: 12px">今日入院人数</div>
            <div style="font-size: 40px; color: #303133; margin-bottom: 8px">{{admission.number}}人</div>
            <div style="width: 350px;font-size: 20px; color: #f56c6c; margin-bottom: 12px">较昨日{{ admission.compare }}人</div>
            <el-link type="primary" href="patientInfo">查看详情<i class="el-icon-arrow-right"></i></el-link>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card shadow="hover" style="border-radius: 8px; padding: 20px" class="custom-card">
            <div style="font-size: 20px; color: #909399; margin-bottom: 12px">今日退院人数</div>
            <div style="font-size: 40px; color: #303133; margin-bottom: 8px">{{discharge.number}}人</div>
            <div style="width: 350px;font-size: 20px; color: #f56c6c; margin-bottom: 12px">较昨日{{ discharge.compare }}人</div>
            <el-link type="primary" href="patientInfo">查看详情<i class="el-icon-arrow-right"></i></el-link>
          </el-card>
        </el-col>
      </el-row>

      <!-- 床位使用情况 -->
      <el-card shadow="hover" style="border-radius: 8px;margin-bottom: 20px">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px">
          <div style="font-size: 16px; color: #303133">床位使用情况</div>
          <div class="block">
            <el-date-picker
                v-model="date1"
                type="daterange"
                range-separator="to"
                start-placeholder="Start date"
                end-placeholder="End date"
                :size="size"
                @change="getDataForBedDate"
            />
          </div>
        </div>

        <el-row :gutter="40" type="flex" justify="space-between">
          <el-col :span="5" style="display: flex; flex-direction: column; gap: 12px; padding: 12px;  border-radius: 6px ;text-align: center">
            <span style="color: #909399; font-size: 20px">全院总床位</span>
            <span style="color: blue; font-size: 40px; font-weight: 500">{{bedDate.count}}</span>
          </el-col>

          <el-col :span="5" style="display: flex; flex-direction: column; gap: 12px; padding: 12px;  border-radius: 6px;text-align: center">
            <span style="color: #909399; font-size: 20px">已使用床位数</span>
            <span style="color: red; font-size: 40px; font-weight: 500">{{bedDate.used}}</span>
          </el-col>

          <el-col :span="5" style="display: flex; flex-direction: column; gap: 12px; padding: 12px;  border-radius: 6px;text-align: center">
            <span style="color: #909399; font-size: 20px">未使用床位数</span>
            <span style="color: green; font-size: 40px; font-weight: 500">{{bedDate.unused}}</span>
          </el-col>

          <el-col :span="5" style="display: flex; flex-direction: column; gap: 12px; padding: 12px;  border-radius: 6px;text-align: center">
            <span style="color: #909399; font-size: 20px">新增床位数</span>
            <span style="color: #303133; font-size: 40px; font-weight: 500">{{bedDate.add}}</span>
          </el-col>
        </el-row>

        <el-link type="primary" style="margin-top: 20px; "
        href="bedManager">查看详情<i class="el-icon-arrow-right"></i></el-link>
      </el-card>

      <!-- 新增接待趋势图表 -->
      <el-card shadow="hover" style="border-radius: 8px">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px">
          <div style="font-size: 16px; color: #303133">接待人数趋势</div>
          <div class="block">
            <el-date-picker
                v-model="date2"
                type="daterange"
                range-separator="to"
                start-placeholder="Start date"
                end-placeholder="End date"
                :size="size"
                readonly
            />
          </div>
        </div>

        <div ref="chartRef" style="height: 400px; width: 100%"></div>
      </el-card>

    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from 'echarts';


const chartRef = ref(null);

const receptions=ref({number:0,compare:''})
const visit=ref({number:0,compare:''})
const admission=ref({number:0,compare:''})
const discharge=ref({number:0,compare:''})
const bedDate=ref({count:0,used:0,unused:0,add:0})
const date1=ref('')
const date2=ref([])
const dateRange=ref([])
const dataForChartPhone=ref([])
const dataForChartScene=ref([])

onMounted(() => {
  getToday();
  getDataForBedDate();
  getDataForChart();
  getDataForCard();
})
const getToday = () => {
  const end = new Date();
  const start = new Date();
  start.setDate(end.getDate() -10);
  date2.value=[start.toISOString().slice(0, 10), end.toISOString().slice(0, 10)]
  dateRange.value.push(start.toISOString().slice(5, 10))
  for (let i = 1; i < 11; i++) {
    start.setDate(start.getDate() + 1);
    dateRange.value.push(start.toISOString().slice(5, 10)) ;
  }
}

const getDataForCard = () => {
  receptions.value.number=Math.floor(Math.random() * 200);
  receptions.value.numberYesterday=Math.floor(Math.random() * 200);
  let compare=receptions.value.number-receptions.value.numberYesterday;
  receptions.value.compare=compare>0?'增加'+compare:'减少'+(-compare);
  visit.value.number=Math.floor(Math.random() * 200);
  visit.value.numberYesterday=Math.floor(Math.random() * 200);
  compare=visit.value.number-visit.value.numberYesterday;
  visit.value.compare=compare>0?'增加'+compare:'减少'+(-compare);
  admission.value.number=Math.floor(Math.random() * 200);
  admission.value.numberYesterday=Math.floor(Math.random() * 200);
  compare=admission.value.number-admission.value.numberYesterday;
  admission.value.compare=compare>0?'增加'+compare:'减少'+(-compare);
  discharge.value.number=Math.floor(Math.random() * 200);
  discharge.value.numberYesterday=Math.floor(Math.random() * 200);
  compare=discharge.value.number-discharge.value.numberYesterday;
  discharge.value.compare=compare>0?'增加'+compare:'减少'+(-compare);
};

const getDataForBedDate = () => {
  bedDate.value.count=Math.floor(Math.random() * 200);
  bedDate.value.used=Math.floor(Math.random() * 200);
  while (bedDate.value.used>bedDate.value.count){
    bedDate.value.used=Math.floor(Math.random() * 200);
  }
  bedDate.value.unused=bedDate.value.count-bedDate.value.used;
  bedDate.value.add=Math.floor(Math.random() * 200);
};

const getDataForChart = () => {
  for (let i = 0; i < 10; i++) {
    dataForChartPhone.value.push(Math.floor(Math.random() * 200))
    dataForChartScene.value.push(Math.floor(Math.random() * 200))
  }
}





onMounted(() => {
  // 初始化图表
  const myChart = echarts.init(chartRef.value);

  // 图表配置
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['电话', '现场']
    },
    xAxis: {
      type: 'category',
      data: dateRange.value
    },
    yAxis: {
      type: 'value',
      max: 200,
      interval: 50
    },
    series: [
      {
        name: '电话',
        type: 'line',
        data: dataForChartPhone.value,
        smooth: true
      },
      {
        name: '现场',
        type: 'line',
        data: dataForChartScene.value,
        smooth: true
      }
    ]
  };

  myChart.setOption(option);

  // 响应式调整
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>
<style scoped>
.custom-card:hover {
  background: #409EFF !important;
  transition: all 0.3s;
}

.custom-card:hover div {
  color: white !important;
}

.custom-card:hover .el-link {
  color: white !important;
}

.custom-card:hover .el-link i {
  color: white !important;
}
</style>